<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #head {
            height: 40px;
            background-color: black;
            color: white;
            /*text-align: center;*/
            /*设置行高为容器的高度 则文本在垂直方向居中*/
            line-height: 40px;
            font-size: 12px;
            padding-left: 92px;
        }
        #search,#lb{
            margin: 0 auto;
        }

        #search{
            width: 1226px;
            height: 100px;
            background-color: pink;
            margin-top: 5px;
            margin-bottom: 5px;
            /*粘性定位*/
            position: sticky;
            top: 0;
            z-index: 999;
        }

        #lb{
            width: 1226px;
            height: 460px;
            background-color: skyblue;
            margin-bottom: 10px;
            position: relative;
        }

        .div1{
            width: 234px;
            height: 167px;
            background-color: green;
            float: left;
            margin-left: 130px;
            margin-bottom: 10px;
        }

        .dv-list{
            width: 316px;
            height: 167px;
            background-color: pink;
            float: left;
            margin-bottom: 10px;
        }

        ul{
            list-style-type: none;
        }

        ul>li{
            float: left;
            /*margin-right: 10px;*/
            /*border-right: 1px solid ghostwhite ;*/
            /*padding-right: 10px;*/
            height: 12px;
        }
        a{
            color: white;
            text-decoration: none;
        }
        span{
            margin: 0 .3em;
            color: #424242;
        }

        #left-btn,#right-btn{
            width: 40px;
            height: 70px;
            /*border: 1px solid red;*/
        }

        #left-btn{
            position: absolute;
            left: 234px;
            top: 195px;
            background-image: url("icon-slides.png");
            background-position: -84px;
        }

        /*鼠标滑过*/
        #left-btn:hover{
            background-position: 0px;
        }

        #right-btn:hover{
            background-position: -43px;
        }

        #right-btn{
            position: absolute;
            right: 0;
            top: 195px;
            background-image: url("icon-slides.png");
            background-position: -125px;
        }
        img{
            width: 1226px;
        }
        .tool{
            width: 84px;
            height: 454px;
            /*border: 1px solid red;*/
            position: fixed;
            right: 0px;
            bottom: 100px;
            background-color: #fff;

        }

        .tool>div{
            width: 84px;
            height: 90px;
            border-bottom: 1px solid #f5f5f5;
            text-align: center;
            line-height: 90px;
            color: #757575;
        }

        .tool>div:hover{
            color: #ff6700;
        }
    </style>
</head>
<body>

<div id="head">
    <ul>
        <li>
            <a href="http://www.baidu.com">小米官网</a>
            <span>|</span>
        </li>

        <li>
            <a href="">小米商城</a>
            <span>|</span>
        </li>
        <li>
            <a href="">小米澎湃OS</a>
            <span>|</span>
        </li>
        <li>
            <a href="">小米汽车</a>
            <span>|</span>
        </li>
        <li>
            <a href="">云服务</a>
        </li>
    </ul>
</div>

<div id="search">
    search
</div>

<div id="lb">
    <img src="1.jpg">
    <div id="left-btn"></div>
    <div id="right-btn"></div>
</div>

<div>
    <div class="div1">1</div>
    <div class="dv-list" style="margin-left: 15px">2</div>
    <div class="dv-list" style="margin-left: 15px;margin-right: 15px">3</div>
    <div class="dv-list">4</div>
</div>


<div class="tool">
  <div>手机APP</div>
  <div>个人中心</div>
  <div>售后服务</div>
  <div>人工客服</div>
  <div>购物车</div>
</div>

<div style="width: 100px;height: 1000px;">


</div>
</body>
</html>